<template>
  <div class="dialog_content_item">
    <HandicapName :itemdata="itemdata" :dataindex="dataindex" :pkindex="pkindex" :match="match" />
    <Order
      v-for="(item, index) in itemdata.order"
      :key="index"
      :orderdata="item"
      :dataindex="dataindex" :itemdata="itemdata"
      :orderindex="index" :pkindex="pkindex" 
    />
    <Bookies :itemdata="itemdata" :dataindex="dataindex" :pkindex="pkindex" :activeoddsindex="activeoddsindex" />
  </div>
</template>

<script setup>
import HandicapName from './HandicapName.vue'
import Order from './Order.vue'
import Bookies from './Bookies.vue'
import { onMounted } from 'vue'

const props = defineProps({
  itemdata: Object,
  dataindex: Number,
  pkindex: Number,
  activeoddsindex: Number,
  match: Object
})
onMounted(() => {
  console.log(props.itemdata)
})
</script>

<style lang="scss" scoped>
.dialog_content_item {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  padding: 4px;
  margin-bottom: 8px;
  border: 1px solid rgba(55, 17, 216, 0.08);;
}
</style>
